@extends('front.public_layout.layout')


@section('style')
    <link rel="stylesheet" href="{{asset('/front/css/bootstrap4.3.1.min.css')}}">
    <link rel="stylesheet" href="{{asset('/front/css/article.css')}}">
    <style>

    </style>
@endsection

@section('content')
    <div class="middle-content shop">

        {{--    广告banner--}}
        @if ($banner_adv)
            <a class="index-adv" href="{{ $banner_adv->pc_url }}">
                <img src="{{ $banner_adv->adv_img_pc_url }}" alt="">
            </a>
        @endif

        {{--    文章列表--}}
        <div class="article-list">

            <div class="category-list">
                @foreach($catrgory as $catrgoryKey => $catrgoryVal)
                    <div class="c-item {{ $catrgoryKey == 0 ? 'checked' : '' }}" data-id="{{ $catrgoryVal->id }}" onclick="article_list({{ $catrgoryVal->id }}, 1)">
                        {{ $catrgoryVal->category_name }}
                    </div>
                @endforeach
            </div>

            <div class="lists clear">
                <div id="article_lists"></div>

                <div class="more-btn" onclick="article_list({{ $article_catrgory_id }})">查看更多</div>
            </div>

            <input type="hidden" name="catrgory_id" value="{{ $catrgory_id }}">
            <input type="hidden" name="article_catrgory_id" value="{{ $article_catrgory_id }}">

        </div>

        {{--    农品热销--}}
        <div class="goods-adv">
            <div class="title">农品热销</div>

            @foreach($hotGoods as $hotGoodsVal)
            <a class="goods-adv-item" href="{{ url('shop/details/'.$hotGoodsVal->id) }}">
                <div class="goods-img">
                    <img src="{{ $hotGoodsVal->goods_img_url }}" alt="">
                </div>
                <div class="goods-name">{{ $hotGoodsVal->goods_name }}</div>
                <div class="price">{{ $hotGoodsVal->acticity_price }}元</div>
            </a>
            @endforeach

        </div>


    </div>

@endsection


@section('js')

    <script src="{{asset('front/js/bootstrap4.3.1.min.js')}}"></script>
    <script>
        // $('.carousel').carousel({
        //     interval: 5000,
        //     pause: '',
        //     wrap:true
        // })

        var is_region = '{{ $is_region }}' * 1;
        var keywords = '{{ $keywords ?? '' }}';

        var adv_url = '{{ url('ajax_category_article_adv') }}';
        function get_adv() {
            $.post(adv_url, {
                catrgory_id: $('input[name="catrgory_id"]').val(),
                _token: '{{ csrf_token() }}',
                is_region: is_region
            }, function (data) {
               $('.index-adv').before(data);
            }, 'html');
        }
        get_adv();

        var article_url = '{{ url('ajax_category_article_lists') }}';
        function article_list(categoryid, first = 0) {
            $.post(article_url, {
                _token: '{{ csrf_token() }}',
                category_id: categoryid,
                keywords: keywords
            }, function (data) {
                if (data.status == 1) {
                    if (data.data.next_page_url) {
                        article_url = data.data.next_page_url;
                        $('.more-btn').show();
                    } else {
                        $('.more-btn').hide();
                    }

                    if (first == 1) {
                        $('.c-item').removeClass('checked');
                        $('.category-list').find('div[data-id="' + categoryid + '"]').addClass('checked');
                    }

                    var html = '';
                    $.each(data.data.data,function(index,item){
                        html += '<div class="article-item">';
                        if (item.list_img_url) {
                            html += '   <a class="article-img" href="'+'{{url('article/details')}}'+'/'+item.id+'">';
                            html += '       <img src="'+item.list_img_url+'">';
                            html += '   </a>';
                        }
                        html += '   <div class="article-info">';
                        html += '       <a class="title" href="'+'{{url('article/details')}}'+'/'+item.id+'">';
                        if (is_region == 1) {
                            if (item.region_info) {
                                html += '       【'+item.region_info.region_name+'】';
                            }
                        }
                        html += '       '+item.article_title+'</a>';

                        html += '       <a class="author-info" href="'+'{{url('author')}}'+'/'+item.articles_author.id+'/1'+'">';
                        html += '           <div class="author">'+item.articles_author.name+'</div>';
                        html += '           <div class="time">'+item.created_at+'</div>';
                        html += '           <div class="right">';
                        html += '               <div class="zan">'+item.zan_num+'</div>';
                        html += '               <div class="read">'+item.read_num+'</div>';
                        html += '           </div>';
                        html += '       </a>';
                        html += '   </div>';
                        html += '</div>';

                    });

                    if (first == 1) {
                        $('#article_lists').html(html);
                    } else {
                        $('#article_lists').append(html);
                    }


                } else {

                }
            }, 'json');
        }
        article_list($('input[name="article_catrgory_id"]').val());

    </script>
@endsection